<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直对齐-属性基本使用(vertical align - use attribute basis)</title>
  <!-- 
  vertical-align  属性用于指定行内元素的垂直对齐方式，其取值可以是长度值、百分比、关键字或者基线相对于父元素的百分比值。vertical-align  属性的总结： 
 
    1. **基线对齐**： vertical-align: baseline;  使元素的基线与父元素的基线对齐。这是行内元素默认的垂直对齐方式。 
    
    2. **顶部对齐**： vertical-align: top;  将元素的顶部与父元素的顶部对齐。 
    
    3. **底部对齐**： vertical-align: bottom;  将元素的底部与父元素的底部对齐。 
    
    4. **中部对齐**： vertical-align: middle;  将元素的中部与父元素的中部对齐。 
    
    5. **文本顶部对齐**： vertical-align: text-top;  将元素的顶部与相邻文本的顶部对齐。 
    
    6. **文本底部对齐**： vertical-align: text-bottom;  将元素的底部与相邻文本的底部对齐。 
    
    7. **长度值和百分比**：除了关键字外， vertical-align  还可以接受长度值、百分比值等，用于指定元素相对于基线的偏移量
  -->
  <style>
    .container {
      background-color: #f0f0f0;
    }

    .container img {
      width: 200px;
    }

    .container .inline-i {     
      display: inline-block;
      width: 200px;
      height: 110px;
      background-color: orange;
    }
  </style>
  <style>
    .vertical-align-top {
      vertical-align: top;
    }

    .vertical-align-bottom {
      vertical-align: bottom;
    }

    .vertical-align-middle {
      vertical-align: middle;
    }

    .vertical-align-text-top {
      vertical-align: text-top;
    }

    .vertical-align-text-bottom {
      vertical-align: text-bottom;
    }
  </style>
</head>
<body>

  <h3>1. 基线对齐</h3>
  <div class="container">
    **基线对齐**： vertical-align: baseline;  使元素的基线与父元素的基线对齐。这是行内元素默认的垂直对齐方式 xxxxxasdlkjh1234
    <img class="vertical-align-baseline" src="../../images/music_album01.jpg" alt="">
    <i class="inline-i">vertical-align 属性可以控制文本内容相对于基线的垂直对齐方式，如 baseline 、 top 、 middle 、 bottom 等</i>
    xxxxXXXX
  </div>

  <h3>1. 顶部对齐</h3>
  <div class="container">
    **顶部对齐**： vertical-align: top;  将元素的顶部与父元素的顶部对齐。 xxxxxasdlkjh1234
    <img class="vertical-align-top" src="../../images/music_album01.jpg" alt="">
    <i class="inline-i">vertical-align 属性可以控制文本内容相对于基线的垂直对齐方式，如 baseline 、 top 、 middle 、 bottom 等</i>
    xxxxXXXX
  </div>

  <h3>2. 底部对齐</h3>
  <div class="container">
    **底部对齐**： vertical-align: bottom;  将元素的底部与父元素的底部对齐。 xxxxxasdlkjh1234
    <img class="vertical-align-bottom" src="../../images/music_album01.jpg" alt="">
    <i class="inline-i">vertical-align 属性可以控制文本内容相对于基线的垂直对齐方式，如 baseline 、 top 、 middle 、 bottom 等</i>
    xxxxXXXX
  </div>

  <h3>3. 中部对齐</h3>
  <div class="container">
    **中部对齐**： vertical-align: middle;  将元素的中部与父元素的中部对齐。 xxxxxasdlkjh1234
    <img class="vertical-align-middle" src="../../images/music_album01.jpg" alt="">
    <i class="inline-i">vertical-align 属性可以控制文本内容相对于基线的垂直对齐方式，如 baseline 、 top 、 middle 、 bottom 等</i>
    xxxxXXXX
  </div>

  <h3>4. 文本顶部对齐</h3>
  <div class="container">
    vertical-align: text-top;  将元素的顶部与相邻文本的顶部对齐。xxxxxasdlkjh1234
    <img class="vertical-align-text-middle" src="../../images/music_album01.jpg" alt="">
    <i class="inline-i">vertical-align 属性可以控制文本内容相对于基线的垂直对齐方式，如 baseline 、 top 、 middle 、 bottom 等</i>
    xxxxXXXX
  </div>

  <h3>5. 文本底部对齐</h3>
  <div class="container">
    **文本底部对齐**： vertical-align: text-bottom;  将元素的底部与相邻文本的底部对齐。 xxxxxasdlkjh1234
    <img class="vertical-align-text-bottom" src="../../images/music_album01.jpg" alt="">
    <i class="inline-i">vertical-align 属性可以控制文本内容相对于基线的垂直对齐方式，如 baseline 、 top 、 middle 、 bottom 等</i>
    xxxxXXXX
  </div>
  
</body>
</html>